<template>
	<!-- 应急调度 -->
	<view>
		<view class="p-10">
			<u-collapse :value="showMoreKeys" ref="collapse">
				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">应急预案</text></view>
					</template>
					<view class="flex s-center ">
						<view class="m-r-10 f1 w0">
							<my-picker v-model="selectVal" :columns="data" label="应急预案" />
						</view>
						<up-button style="width: 200rpx; height: 60rpx" color="#2172fc" @click="send" text="发送预案消息" />
					</view>
					<view style=" background: #091F41AB;" class="p-5 m-t-10">
						<image :src="getImgUrl(type)" mode="widthFix" style="width: 100%;height: 1148rpx;" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="3">
					<template #title>
						<view class="content-item-title"><text class="title-txt">应急专家列表</text></view>
					</template>
					<my-scroll style="height: 300px;" @scrolltolower="scrolltolower2">
						<view v-for="(item,i) in tableData2" :key="i" :class="{'m-t-10': i > 0}"
							class="flex s-center m-between p-10 b-r-10"
							style="background-color: #F5F7FE;border: 1px solid #DCE3E8;">
							<view class="f1 w0">
								<view class="m-b-10 flex s-center">
									<text style="color:#0052D9" class="f-s-20 fw">{{item.姓名}}</text>
									<text style="color:#555D6F">{{phoneHide(item.电话)}}</text>
								</view>
								<up-tag :text="item.单位" plain size="mini" type="success" v-if="item.单位"></up-tag>
								<up-tag :text="item.类别" plain size="mini" type="info" class="m-l-5"
									v-if="item.类别"></up-tag>
							</view>
							<image :src="getImgUrl(`phone.png`)" mode="widthFix" style="width: 80rpx"
								@click="makePhone(item)"></image>
						</view>
					</my-scroll>
				</u-collapse-item>

				<u-collapse-item name="2">
					<template #title>
						<view class="content-item-title"><text class="title-txt">应急预案发送记录</text></view>
					</template>
					<my-scroll style="height: 300px;" @scrolltolower="scrolltolower">
						<my-table :columns="columns" :data="tableData" />
					</my-scroll>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script setup>
	import {
		customApiBaseURL as baseURL
	} from '@/config/index.js';
	import {
		getApiFabric,
		callApiBySuffix,
		getByApiCode,
		img
	} from "@/api/customApi";
	import {
		phoneHide
	} from "@u/index";

	const showMoreKeys = ref([1, 2, 3]),
		collapse = ref(null);

	/*******************************************应急预案***************************************/
	let data = ref([]),
		selectVal = ref('');

	function fn1() {
		getByApiCode({
			apiCode: "yingjirenyuan",
			propertyMapping: {
				dictLabel: "name",
				dictValue: "name"
			}
		}).then((res) => {
			data.value = [res.data];
			selectVal.value = res.data[0].dictValue;
		})
	}
	const imgUrl = ref(''),
		type = ref('');
	watch(selectVal, (val) => {
		switch (val) {
			case "地面生产系统事故专项应急预案":
			case "道路运输事故专项应急预案":
				type.value = 'type2.png'
				break;
			case "爆破事故专项应急预案":
				type.value = 'type3.png'
				break;
			case "极端天气事故专项应急预案":
				type.value = 'type4.png'
				break;
			default:
				type.value = 'type1.png'
		}
		callApiBySuffix({
			suffix: 'yingjipng',
			data: {
				yaName: val
			}
		}).then(async (res) => {
			imgUrl.value =
				`${baseURL}/metaworks/eform-record/v1/file/download/241364805133365248/242089161534828544/${res.data[0].url}`
		})
	})

	function send() {
		confirm('确定发送启动预案消息').then(async (res) => {
			await callApiBySuffix({
				suffix: 'planPersonnel',
				data: {
					name: selectVal.value,
					ytName: uni.getStorageSync('userInfo').userName,
					ytAliasName: uni.getStorageSync('userInfo').userName
				}
			})
			msgSuccess('发送成功！')
		})
	}

	/*******************************************应急预案发送记录***************************************/
	let columns = [{
			prop: '预案名称',
			label: '预案名称',
			width: 110
		}, {
			prop: '发送消息',
			label: '发送消息',
			width: 110
		}, {
			prop: '发送时间',
			label: '发送时间',
			width: 150
		}],
		tableTotalList = [],
		tableData = ref([]);

	function fn2() {
		getByApiCode({
			apiCode: "yuanjilu",
			propertyMapping: {
				预案名称: "name",
				发送消息: "news",
				发送号码: "number",
				发送时间: "time"
			}
		}).then((res) => {
			tableTotalList = res.data;
			tableData.value = tableTotalList.slice(0, 10);
		})
	}

	function scrolltolower() {
		if (tableData.value.length <= tableTotalList.length) {
			tableData.value.push(...tableTotalList.slice(tableData.value.length, tableData.value.length + 10))
		}
	}

	/*******************************************应急专家列表***************************************/
	let columns2 = [{
			prop: '姓名',
			label: '姓名',
			width: 110
		}, {
			prop: '单位',
			label: '单位',
			width: 110
		}, {
			prop: '类别',
			label: '类别',
			width: 150
		}, {
			prop: '电话',
			label: '电话',
			width: 150
		}],
		tableData2 = ref([]),
		pageIndex = 1,
		total = 0;

	function fn3() {
		if (pageIndex === 1) tableData2.value = []
		getByApiCode({
			apiCode: "SAHHSA",
			pageIndex: pageIndex,
			pageSize: 10,
			total: true,
			propertyMapping: {
				姓名: "name",
				单位: "zhuanye",
				类别: "leibie",
				电话: "phone"
			}
		}).then((res) => {
			total = res.total;
			tableData2.value.push(...res.data);
		})
	}

	function scrolltolower2() {
		if (tableData2.value.length < total) {
			pageIndex++;
			fn3();
		}
	}

	function makePhone(item) {
		// #ifdef APP-PLUS
		plus.device.dial(item.电话, true);
		//#endif

		// #ifdef H5
		uni.makePhoneCall({
			phoneNumber: item.电话
		})
		//#endif
	}

	function getServerData(refresh) {
		pageIndex = 1;
		Promise.all([fn1(), fn2(), fn3()]).then(() => {
			if (refresh) {
				nextTick(() => {
					uni.stopPullDownRefresh()
				})
			}
			setTimeout(() => {
				collapse.value.init()
			}, 400)
		});
	}

	onShow(() => {
		getServerData()
	})

	onPullDownRefresh(() => {
		getServerData(true)
	})
</script>

<style lang="scss" scoped>
</style>